<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 轮播图导入 -->
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/certify.css">
		<script src="js/swiper.min.js"></script>
		<!-- 轮播图导入结束 -->
		<style type="text/css">
			body {
				margin: 0;
			}
		

			#big {
				width: 1250px;
				height: 1089px;
				margin: 60px auto;
			}

			#left {
				float: left;
				position: relative;
			}

			#left li {
				list-style: none;
			}
						
			#left .active a {
				position: relative;
				color: rgb(241, 102, 34);
			}
			
			#left .active a::before {
				content: "|";
				color: rgb(241, 102, 34);
				position: absolute;
				left: -30px;
			}

			a {
				text-decoration: none;
				font-size: 14px;
				color: #212121;
				display: block;
				width: 81px;
				margin-left: 57px;
				height: 13px;
				margin-bottom: 18px;
			}

			p {
				font-size: 14px;
				margin-top: 15px;
				color: #212121;
				display: block;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
			}

			#right {
				/* border-left: 1px solid #E0E0E0;
				    margin-bottom: 60px;
				    margin-left: 170px;
				    display: block; */
				font: 14px/1.5 "Tahoma", arial, "Microsoft Yahei", sans-serif;
				color: #757575;
				-webkit-tap-highlight-color: transparent;

				border-left: 1px solid #E0E0E0;
				margin-bottom: 60px;
				margin-left: 170px;
				display: block;
				text-align: center
			}

			#right>a>img {
				margin: 17px 415.5px 120px;
			}


			/* 图片加文字部分 */
			#one {
				width: 900px;
				margin: 0 auto;
				border-top: 1px solid #ccc;
				margin-top: 60px;
				height: 100%;
				overflow: hidden;
				position: relative;
				top: 60px;

			}

			.onetext {
				display: block;
				text-align: left;
				margin-left: 94px;
				font-size: 14px;
				color: rgba(117, 117, 117, 1);
				line-height: 28px;
				width: 332px;
				margin-top: 17px;
				float: left;
				
				

			}

			#one1 img {
				float: left;

			}
			#one1{
				position: relative;
				top: 100px;
			}

			.one11 {
				width: 900px;
				height: 350px;
				overflow: hidden;
				margin: 0 auto;
				padding: 0 0 0 150px;
			}
			
			/* 细节调整 */
			h1{
				font-size: 24px;
				    color: #212121;
			}
		
		</style>
	</head>
	<body>
		
		
		<div id="top">
			<img style="width: 1900px;" src="images/ia_100000008.png">
		</div>
		<!-- 第一部分 -->
		<div id="big">
			<div id="left">
				<ul>
					<li><a id="a1" href="about.html">关于我们</a></li>
					<li class="active"><a id="a2" href="join.html">加入我们</a></li>
					<li><a id="a3" href="call.html">联系我们</a></li>
				</ul>
				
			</div>

			<div id="right">
				<!-- 右边的大框-->
				<h1>我们在寻找</h1>
				<p>WE ARE FINDING</p>
				<p>
					我们期待有梦想,有激情,有创意,有能力的你加入我们,</p>
				<p>
					为你提供 “有成长、有舞台、有未来” 的平台!</p>
				<a href="#"><img src="images/1620149096(1).jpg"></a>

				<div id="one">
					<div style="font-size: 24px;color: black; margin: 65px 0 0 0;">加入我们</div>
					<div style="margin-top: 8px;color: black;">JOIN US</div>

				</div>
				<div id="one1">
					<!-- 第一行 -->
					<div class="one11">
						<img style="width: 320px;" src="images/one1.png" />
						<div class="onetext">
							<div style="font-size:20px;color:rgba(0,0,0,1);line-height:26px;text-align: left; position: relative; top: -20px;">有成长</div>
							我们希望货拉拉能给我们同事的，不仅仅是一份工作，也是一段成长的旅程。但个人的成长肯定不是温室式的成长，我们都是透过克服一个又一个困难而成长的。货拉拉发展快，会有无数的挑战和问题，这些都是成长的机会。
						</div>
					</div>

					<!-- 第二行 -->
					<div class="one11">
						<div class="onetext" style="margin: 17px 0 0 0 ;">
							<div style="font-size:20px;color:rgba(0,0,0,1);line-height:26px;text-align: left; position: relative; top: -20px; ">有舞台</div>
							每个有能力的人，都希望有一个舞台让他发挥所长。一个足球员，一定会希望有个球场实现他冠军的梦，一个百米飞人，肯定希望有个奥林匹克的赛道。我们经常说互联网就是商界的奥林匹克，在货拉拉这里，我们希望大家能有机会把自己的所知所能的，发挥到极致。
						</div>
						<img style="width: 320px;margin: 0 0 0 94px; " src="images/one2.png" />
					</div>


					<!-- 第三行 -->
					<div class="one11">
						<img style="width: 320px" src="images/one3.png" />
						<div class="onetext">
							<div style="font-size:20px;color:rgba(0,0,0,1);line-height:26px;text-align: left; position: relative; top: -20px;">有未来</div>
							每个有能力的人，都希望有一个舞台让他发挥所长。一个足球员，一定会希望有个球场实现他冠军的梦，一个百米飞人，肯定希望有个奥林匹克的赛道。我们经常说互联网就是商界的奥林匹克，在货拉拉这里，我们希望大家能有机会把自己的所知所能的，发挥到极致。
						</div>
					</div>
				</div><!-- 图片与文字的那个部分 -->



				<div style="font-size: 24px;margin-top: 40px;text-align: center ;border-top: 1px #ccc solid;padding: 50px 0 0 0;">
					货拉拉日常
				</div>
				<div style="margin-top: 8px;text-align: center ;margin: 0 0 50px 0;">HUOLALA LIFE</div>
				


				<!-- 轮播图部分 -->
				<div id="lbt" style="position: relative;left: -100px;">

					<div id="certify">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<img style="width: 450px;height: 288px" class="swiper-slide" src="images/lb1.jpg" />
								<img style="width: 450px;height: 288px;" class="swiper-slide" src="images/lb2.jpg" />
								<img style="width: 450px;height: 288px;" class="swiper-slide" src="images/lb3.jpg" />
								<img style="width: 450px;height: 288px;" class="swiper-slide" src="images/lb4.jpg" />

							</div>
						</div>

						<div style="margin: -22px 0 0 150px;" class="swiper-button-prev"></div>
						<div style="margin:-13px 150px 0 0" class="swiper-button-next"></div>
					</div>

					<script>
						certifySwiper = new Swiper('#certify .swiper-container', {
							watchSlidesProgress: true,
							slidesPerView: 'auto',
							centeredSlides: true,
							loop: true,
							loopedSlides: 4,
							autoplay: true,
							navigation: {
								nextEl: '.swiper-button-next',
								prevEl: '.swiper-button-prev',
							},
							pagination: {
								el: '.swiper-pagination',
								//clickable :true,
							},
							on: {
								progress: function(progress) {
									for (i = 0; i < this.slides.length; i++) {
										var slide = this.slides.eq(i);
										var slideProgress = this.slides[i].progress;
										modify = 1;
										if (Math.abs(slideProgress) > 1) {
											modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
										}
										translate = slideProgress * modify * 260 + 'px';
										scale = 1 - Math.abs(slideProgress) / 5;
										zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
										slide.transform('translateX(' + translate + ') scale(' + scale + ')');
										slide.css('zIndex', zIndex);
										slide.css('opacity', 1);
										if (Math.abs(slideProgress) > 3) {
											slide.css('opacity', 0);
										}
									}
								},
								setTransition: function(transition) {
									for (var i = 0; i < this.slides.length; i++) {
										var slide = this.slides.eq(i)
										slide.transition(transition);
									}

								}
							}

						})
					</script>
				</div>



				<!-- 轮播图结束 -->
			</div><!-- 右边的大框 -->

		</div><!-- big框 分为左右两个部分 -->
		</div>

	</body>
</html>
